<template>
	<view class="shoppingorderdetail">
		<view class="order-all">
			<view class="order-status">
				<text>{{refundment}}</text>
				<view class="order-status-time"  v-if="refundment=='等待平台处理' ">
					<uniCountdown :day="10" :second="0" :show-colon="false"/>
				</view>
				<text v-else>{{updateTime}}</text>
			</view>
			<view class="process">
				<view class="process-title"  v-if="refundment=='等待平台处理' ">
					<view>
						<text>您已成功发起退款申请，请耐心等待平台处理。</text>
					</view>
				</view>
				<!-- 退款成功 -->
				<view class="process-money"  v-if="refundment=='退款成功' ">
					<text>退款总金额</text>
					<text>￥{{refundAmount}}</text>
				</view>
				<view class="process-contant" v-if="refundment=='等待平台处理'">
					<view>
						<text>·平台同意退款时，系统将退款给您。\n</text>
						<text>·若平台拒绝，您可以修改申请重新发起退款。</text>
					</view>
				</view>
			</view>
			<!-- 退款失败 -->
			<view class="process" v-if="refundment=='退款失败' ">
				<view class="process-title">
					<view><text>您的退款申请描述不符，平台已拒绝。</text></view>
				</view>
				<view class="process-contant">
					<view>
						<text>·平台同意退款时，系统将退款给您。\n</text>
						<text>·若平台拒绝，您可以修改申请重新发起退款。</text>
					</view>
				</view>
				<view class="process-button">
					<view class="button-phone"  @click="promptVisible = true" >
						<text>联系客服</text>
					</view>
				</view>
			</view>
			<view class="order-foot">
				<text>退款信息</text>
				<view class="order-foot-up">
					<view class="order-foot-img">
						<image :src="order_detail.listImage"></image>
					</view>
					<view class="order-foot-name">
						<text>{{order_detail.name}}</text>
					</view>
				</view>
				<view class="order-bottom">
					<view style="margin-top: 16upx;">
						<text>退款原因：</text>
						<text>{{applicationReason}}</text>
					</view>
					<view style="margin-top: 16upx;">
						<text>退款金额：</text>
						<text>￥{{refundAmount}}</text>
					</view>
					<view style="margin-top: 16upx;">
						<text>申请时间：</text>
						<text>￥{{createTime}}</text>
					</view>
					<view style="margin-top: 16upx;">
						<text>退款编号：</text>
						<text>￥{{order_detail.orderNumber}}</text>
					</view>
					<view style="margin-top: 16upx; white-space: normal ;"  v-if="reasonDescription">
						<text>退款说明：</text>
						<text>{{reasonDescription}}</text>
					</view>
				</view>
			</view>
		</view>
		<ensure
			:visible.sync="promptVisible" 
			title="175 9979 7420"
			mainColor="rgba(153,153,153,1);" 
			@confirm="clickPromptConfirm" 
			ensure="呼叫" 
			ensureColor="#000!important"
			titleColor="rgba(51,51,51,1)!important" 
			titleSize="48"
			fontWeight="500"
			>
		</ensure>
	</view>
</template>

<script>
	import wxcElip from '@/components/custom/wxc-elip.vue';
	import uniCountdown from '@/components/countdown/uni-countdown.vue';
	import uniSection from '@/components/countdown/uni-section.vue';
	import ensure from "@/components/confirm/confirm.vue"
	export default {
		components: {
			wxcElip,
			uniCountdown,
			uniSection,
			ensure
		},
		props: {
			orderNumber:{
				type:String,
				default:''
			},
			orderid: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				order_detail: [],
				aftersale_list:[],
				refundment:'',
				createTime:'',
				updateTime:'',
				applicationReason:'',
				reasonDescription:'',
				promptVisible:false,
				refundAmount:''
			};
		},
		created() {
			//获取订单详情
			this.getOrderInfo();
			//获取售后详情
			this.getAftersaleInfo()
		},
		onShow() {
			//#ifdef H5
			document.title = '退款详情';
			//#endif
		},
		methods: {
			//呼叫
			clickPromptConfirm:function(){
				uni.makePhoneCall({
				    phoneNumber: '17599797420' //仅为示例
				});
				//关闭弹框
				this.promptVisible = false
			},
			//获取订单详情
			getOrderInfo() { 
				var params = {
					id: this.orderid,
					channelType:'5'
				}
				this.$postApi(this.$path.GOODS_ORDER_DETAIL, params).then(res => {
					console.log("返回的订单详情参数-------------------------->",res.data)
					let item = res.data
					if (item.success) {
						this.order_detail = {
							name:item.data.goodsOrderDetailList[0].title,
							orderNumber:item.data.orderNumber,
							listImage:item.data.goodsOrderDetailList[0].listImage,
							
						}
					}
				})
			},
			//获取售后详情
			getAftersaleInfo(){
				var params = {
					orderNumber:this.orderNumber
				}
				this.$postApi(this.$path.GOODS_AFTERSALE_LIST,params).then(res=>{
					console.log("返回的售后详情---------------->",res)
					if(res.data.success){
						
						this.aftersale_list = res.data.data.list
						
						this.createTime = this.aftersale_list[0].createTime
						this.updateTime = this.aftersale_list[0].updateTime
						this.refundAmount = this.aftersale_list[0].payAmount
						this.applicationReason = this.aftersale_list[0].applicationReason
				
						this.reasonDescription = this.aftersale_list[0].reasonDescription
						// 售后状态(1审核中2进行中4已拒绝)
						switch (this.aftersale_list[0].status){
							case "1":
								// 退款状态(1未退款2退款中3已退款)
								if(this.aftersale_list[0].refundStatus==1){
									this.refundment= "等待平台处理";
								}
								break;
							case "2":
								if(this.aftersale_list[0].refundStatus==2){
									this.refundment= "退款中";
								}
								if(this.aftersale_list[0].refundStatus==3){
									this.refundment= "退款成功";
								}
								break;
							case "4":
									this.refundment= "退款失败";
								break;
						}		
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shoppingorderdetail {
		background: #f5f5f5;
		overflow: hidden;
		/* #ifdef H5 */
		min-height: 100%;
		/* #endif */

		.express-address-view {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20upx;
			width: 100%;
			height: auto;
			background-color: #ffffff;
			background: #ffffff;
			box-sizing: border-box;
			padding: 40upx 40upx 40upx 25upx;
			border-radius: 6upx;

			.location-icon {
				font-size: 30upx;
				color: #666666;
				flex-shrink: 0;
			}

			.content {
				width: 485upx;
				height: auto;
				margin-left: 24upx;
				display: flex;
				flex-direction: column;

				.name-tel {
					display: flex;
					flex-direction: row;
					align-items: baseline;

					.name {
						font-size: 32upx;
						font-weight: bold;
						line-height: 32upx;
						letter-spacing: 1px;
						color: #1a1a1a;
					}

					.tel {
						font-size: 24upx;
						margin-left: 20upx;
						font-weight: medium;
						line-height: 24upx;
						letter-spacing: 0px;
						color: #808080;
					}
				}

				.address {
					margin-top: 16upx;
					width: 100%;
					font-size: 26upx;
					font-weight: medium;
					line-height: 33upx;
					letter-spacing: -2upx;
					color: #1a1a1a;
				}

				.express {
					font-size: 32upx;
					font-weight: medium;
					letter-spacing: 0px;
					color: #1a1a1a;
				}
			}

			.seperator {
				margin-left: 48upx;
				width: 2upx;
				height: 51upx;
				background-color: #e6e6e6;
			}

			.edit {
				font-size: 24upx;
				font-weight: medium;
				line-height: 47upx;
				letter-spacing: -2upx;
				color: #999999;
				margin-left: 25upx;
				flex-shrink: 0;
			}
		}

		.order-status {
			display: flex;
			justify-content: center;
			flex-direction: column;
			height: 201upx;
			background:linear-gradient(87deg,rgba(249,140,45,1) 0%,rgba(250,108,46,1) 100%);
			font-family:PingFang SC;
			color:rgba(255,255,255,1);
			line-height: 36upx;
		}
		.order-status text:first-child{
			font-size:36upx;
			font-weight:500;
			padding-left: 25upx;
		}
		.order-status .order-status-time {	
			margin-top: 10upx;
			font-size:24upx;
			font-weight:400;
			}
		.order-status text:last-child{
			margin-top: 20upx;
			font-size:24upx;
			font-weight:400;
			margin-left: 28upx;
		}
		.process{
			background:rgba(255,255,255,1);
		}
		.process-title{
			font-size:30upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(0,0,0,1);
			
			
			padding: 0 24upx;
		}
		.process-title view{
			height: 94upx;
			border-bottom: 1upx solid rgba(237,237,237,1);
			display: flex;
			align-items: center;
		}
		.process-money{
			height: 95upx;
			padding: 0 25upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size:30upx;
			font-family:PingFang SC;
		}
		.process-money text:first-child{
			font-weight:400;
			color:rgba(0,0,0,1);
		}
		.process-money text:last-child{
			font-weight:500;
			color:rgba(255,94,4,1);
		}
		.process-contant{
			font-size:24upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(102,102,102,1);
			letter-spacing: 4upx;
			padding-left: 24upx;
			padding-right: 10upx;
		}
		.process-contant view{
			height: 136upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			border-bottom: 1upx solid rgba(237,237,237,1);
		}
		.process-contant view text:last-child{
			margin-top: 15upx;
		}
		.process-button{
			height: 117upx;
			display: flex;
			align-items: center;
			padding-right: 25upx;
			justify-content: flex-end;
		}
		.button-phone{
			width:183upx;
			height:61upx;
			border:1upx solid rgba(204,204,204,1);
			border-radius:31upx;
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(128,128,128,1);
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.order-info {
			margin-top: 20upx;
			display: flex;
			flex-direction: column;
			height: auto;
			background: #fff;
			padding: 30upx;
			border-radius: 14upx;
			
			.name {
				display: flex;
				justify-content: space-between;
				// margin-top: -20upx;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;
			}

			.ticket-name,
			.price {
				margin-top: 26upx;
				display: flex;
				justify-content: space-between;
			}

			.zhifu {
				margin-top: 26upx;
				
				display: flex;
				flex-direction: row;
				justify-content: flex-end;

				view {
					width: 160upx;
					border: 1upx solid #ccc;
					text-align: center;
					font-size: 28upx;
					line-height: 50upx;
					border-radius: 8upx;
					margin-left: 20upx;
				}

				view:last-of-type {
					background: #ff4d1d;
					color: #fff;
					border: 1upx solid #ff4d1d;
				}
			}
		}

		.order-foot {
			margin-top: 20upx;
			display: flex;
			flex-direction: column;
			height: auto;
			background: #fff;
			padding: 41upx 31upx 45upx 29upx;
			.order-foot-up{
				height: 158upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-top: 1upx solid rgba(237,237,237,1);
				border-bottom: 1upx solid rgba(237,237,237,1);
			}
			.order-foot-img{
				width:101upx;
			}
			.order-foot-img image{
				height:101upx;
				border-radius:7upx;
			}
			.order-foot-name{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 95upx;
				margin-left: 18upx;
				font-size:34upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:42upx;
				flex-direction: column;
			}
			.order-foot-name text{
				white-space: normal ;
				overflow: hidden;
				
				text-overflow: ellipsis;
				
				display: -webkit-box;
				
				-webkit-line-clamp: 2;
				
				/*! autoprefixer: off */
				
				-webkit-box-orient: vertical;
			}
			.order-bottom{
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(102,102,102,1);
			}
		}
		.order-foot>text{
			font-size:34upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			margin-bottom: 26upx;
		}
	}
</style>
